* {
  margin: 0px;
  padding: 0px;
  /* background-color: rgb(119, 114, 119);   */

  --sequengerBGColor:rgb(119, 114, 119);  
  --transportBar_BG_Color:rgb(95, 91, 95);  
  --bordoMisureB:rgb(226, 220, 185);
  --bordoMisureA:rgb(224, 227, 253);
  --areaMisureBianche:rgb(163, 163, 163);
  --areaMisureNere:rgb(128, 127, 127);
}

.StandardButton {
  background-color: rgb(221, 179, 131);
  color:black;
  font-size: 0.8rem;
  position: relative;
  min-width: 50px;
  height: 40px;
  border: 1px solid #494949;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .3s;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
.StandardButton.playActive{background-color: rgb(85, 227, 180);}
.StandardButton.stopActive{background-color: rgb(85, 227, 180);}
.StandardButton.loopActive{background-color: rgb(85, 227, 180);}
.StandardButton.metroActive{background-color: rgb(85, 227, 180);}
.StandardButton.followActive{background-color: rgb(85, 227, 180);}

.StandardButton.followVariant{margin-left: 2rem;}
.StandardButton.TempoVariant{ min-width: 120px;margin-left: 2rem;}
.StandardButton.BPM_variant{ min-width: 80px;}
.StandardButton.bars_variant{ min-width: 80px;}
.StandardButton.beats_variant{ min-width: 80px;}
.StandardButton.clean_variant{ background-color: rgb(227, 106, 85);margin-left: 2rem;}



/* input[type=file]::file-selector-button {
  background-color: rgb(221, 179, 131);
  color:black;
  font-size: 0.8rem;
  position: relative;
  min-width: 50px;
  height: 40px;
  border: 1px solid #494949;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .3s;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
  background: #bdc48f;
}
 */

.Speed {
  display: flex;
  background-color: green;
  padding: 0.2rem;
}

.Bars {
  display: flex;
  background-color: greenyellow;
  padding: 0.2rem;
  
}
.Beats {
  display: flex;
  background-color: greenyellow;
  padding: 0.2rem;
}


.Sequencer {
  padding: 0rem;
  font-size: 1rem;
  color: #ffc400;
  background:var(--sequengerBGColor);  /* min-height: 100hv; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
}

.TransportBar {
  display: flex;
  padding: 1rem;
  background: var(--transportBar_BG_Color);
    width: 80%;
}

#spazietto { background: var(--sequengerBGColor); height: 2rem;}


#TimeLine .ui-selecting { background: yellow ; }  
#TimeLine .ui-selected { background: crimson; color: black; }  
#TimeLine { display: flex;border-color: #ffc400;}  
#TimeLine div{
  font-size: 5px;  
  width: 1rem;
  min-width: 1rem;
  height: 2rem;
  border-left-style: solid;
  border-left-width: thin; 
  border-bottom: solid;
  border-bottom-width: 0.1rem;
  cursor: pointer;
  background:rgb(119, 114, 119); 
  color: rgb(94, 92, 94); ;
  }
   
.ui-widget-content {  
   background: rgb(139, 62, 62);  
   color: rgb(52, 17, 17);  
}  





.PianoRoll {
  display: flex;
}

.Row {
  display: flex;
  background: cadetblue;
}

.Keyboard {
}

.Key {
  font-size: 1rem;
  width: 3rem;
  background: white;
  height: 0.8rem;
  border-right-style: solid;
  border-right-width: thin; /* border-style: groove; */
  border-bottom: solid;
  border-bottom-width: 0.1rem;
  border-color: black;
}
.BlackNote {
  background: black;
}
.Tasto {
  font-size: 0.4rem;
  color: gray;
}

#PianoRoll {
  display: flex;
}

#MatrixContainer {
  /* width: 80%; */
  overflow-x: scroll;
  overflow-y: hidden;
}

.PadsContainer {
  display: flex;
  /* width: 80%; */
  /* overflow: auto; */
}

.BlackPads {
  background: grey;
}

.WhitePads {
  background: white;
}

.Pad {
  /* background: gray; */
  width: 1rem;
  min-width: 0.5rem;
  height: 0.8rem;
  border-left-style: solid;
  border-left-width: thin; /* border-style: groove; */
  border-bottom: solid;
  border-bottom-width: 0.1rem;
  cursor:pointer;
  /* transition: all 0.5s ease; */


}

.Pad.Cursor
{
  /* border-right-style:solid; */
  border-left-width: medium;
  border-left-color: #070707;
  border-left-style: groove;

}
.Pad.active {
  background: rgb(255, 93, 93);
}

@keyframes playTrack {
  from {
     background-color:red;
  }
  to {
    /* background-color:rgb(0, 255, 42); */
  }
}

.activePlayButton {
  color: blue;
}

.activeKeyColor {
  background: #ffff73;
}

::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* box-shadow: inset 0 0 5px grey; */
  /* border-radius: 10px; */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.measureTypeAWhite {  background: var(--areaMisureBianche);}
.measureTypeBWhite {  background: var(--areaMisureBianche);}
.barsTypeAWhite {  border-color: var(--bordoMisureA); }
.barsTypeBWhite {  border-color: var(--bordoMisureB);}
.measureTypeABlack {  background: var(--areaMisureNere);}
.measureTypeBBlack {  background:var(--areaMisureNere);}
.barsTypeABlack {  border-color: var(--bordoMisureA);}
.barsTypeBBlack {  border-color: var(--bordoMisureB);}